import React from "react";
// import { Card } from "antd";
import "./css/orderStatistics.scss";
import {
  DollarTwoTone,
  ArrowDownOutlined,
  ArrowUpOutlined,
} from "@ant-design/icons";

import ReactEcharts from "echarts-for-react";
// import * as datav from "@jiaminghi/data-view-react";
// const { BorderBox8 } = datav;
// import * as echarts from "echarts";

export default function Orders() {
  const getOption1 = () => {
    const option = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
      // grid设置图形本身的位置及宽和高
      grid: {
        left: 40,
        top: 50,
      },
    };
    return option;
  };
  const getOption2 = () => {
    const gaugeData = [
      {
        value: 20,
        name: "异地换车",
        title: {
          offsetCenter: ["0%", "20%"],
        },
        detail: {
          valueAnimation: true,
          offsetCenter: ["0%", "-15%"],
        },
      },
    ];
    const option = {
      series: [
        {
          type: "gauge",
          startAngle: 90,
          endAngle: -270,
          radius: 60,
          pointer: {
            show: false,
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: "#464646",
            },
          },
          axisLine: {
            lineStyle: {
              width: 10,
            },
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
            distance: 50,
          },
          data: gaugeData,
          title: {
            fontSize: 14,
          },
          detail: {
            width: 10,
            height: 14,
            fontSize: 14,
            color: "inherit",
            borderColor: "inherit",
            borderRadius: 20,
            formatter: "{value}%",
          },
        },
      ],
    };
    return option;
  };
  const getOption3 = () => {
    const gaugeData = [
      {
        value: 20,
        name: "上门取还",
        title: {
          offsetCenter: ["0%", "20%"],
        },
        detail: {
          valueAnimation: true,
          offsetCenter: ["0%", "-15%"],
        },
      },
    ];
    const option = {
      series: [
        {
          type: "gauge",
          startAngle: 90,
          endAngle: -270,
          radius: 60,
          pointer: {
            show: false,
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: "#464646",
            },
          },
          axisLine: {
            lineStyle: {
              width: 10,
            },
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
            distance: 50,
          },
          data: gaugeData,
          title: {
            fontSize: 14,
          },
          detail: {
            width: 50,
            height: 14,
            fontSize: 14,
            color: "inherit",
            borderColor: "inherit",
            borderRadius: 20,
            // borderWidth: 1,
            formatter: "{value}%",
          },
        },
      ],
    };
    return option;
  };
  const getOption4 = () => {
    const option = {
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "86%",
      },
      series: [
        {
          name: "订单来源",
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: true,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 10,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: "电话3" },
            { value: 735, name: "电话2" },
            { value: 580, name: "电话1" },
          ],
        },
      ],
    };
    return option;
  };

  const colors = ["purple", "green", "blue", "orange"];

  return (
    <div className="container">
      <div className="order-header">
        {/* 总销售额 */}
        <div className="total-sales">
          <div className="total-sales-icon">
            <DollarTwoTone />
          </div>
          <div className="total-sales-content">
            <p className="total-font">总销售额/元</p>
            <p>8,987.00</p>
          </div>
        </div>
        {/* 总订单量 */}
        <div className="total-order">
          <div className="total-order-num">
            <div className="total-order-num-icon">
              <DollarTwoTone />
            </div>
            <div className="total-order-nums">
              <p className="total-font">总订单量</p>
              <p>8,987.00</p>
            </div>
          </div>
          <div className="total-all-order">
            <div>
              <p className="total-font">今日下单量</p>
              <p className="total-num">58</p>
              <p
                className="right-one"
                style={{ border: `2px solid ${colors[0]}` }}
              ></p>
            </div>
            <div>
              <p className="total-font">今日成交金额</p>
              <p className="total-num">1566.00</p>
              <p
                className="right-one"
                style={{ border: `2px solid ${colors[1]}` }}
              ></p>
            </div>
            <div>
              <p className="total-font">本月下单量</p>
              <p className="total-num">158</p>
              <p
                className="right-one"
                style={{ border: `2px solid ${colors[2]}` }}
              ></p>
            </div>
            <div>
              <p className="total-font">本月成交金额</p>
              <p className="total-num">11866.00</p>
              <p
                className="right-one"
                style={{ border: `2px solid ${colors[3]}` }}
              ></p>
            </div>
          </div>
        </div>
      </div>
      <div className="order-center">
        {/* 销量统计 */}
        <div className="sales-statistics">
          <div className="sales-statistics-title">
            <span className="sales-statistics-title-font">销量统计</span>

            <div className="sales-statistics-title-btns">
              <span>本月</span>
              <span>本周</span>
              <span>年度</span>
            </div>
          </div>

          <ReactEcharts
            className="sales-statistics-echarts"
            option={getOption1()}
          />
        </div>
        {/* 销售额排行榜 */}
        <div className="sales-ranking">
          <p className="sales-ranking-title">销售额排行榜</p>
          <div className="sales-ranking-content">
            <div className="sales-ranking-content-item">
              <span>1</span>
              <span>门店1</span>
              <span>100</span>
              <span>￥895.00</span>
            </div>
            <div className="sales-ranking-content-item">
              <span>2</span>
              <span>门店2</span>
              <span>100</span>
              <span>￥895.00</span>
            </div>
            <div className="sales-ranking-content-item">
              <span>3</span>
              <span>门店4</span>
              <span>100</span>
              <span>￥895.00</span>
            </div>
          </div>
        </div>
      </div>
      <div className="order-footer">
        {/* 订单类型 */}
        <div className="order-types">
          <div className="order-types-title">订单类型</div>
          <div className="order-types-echarts">
            <div>
              <ReactEcharts option={getOption2()} />
            </div>
            <div>
              <ReactEcharts option={getOption3()} />
            </div>
          </div>
        </div>
        {/* 订单来源 */}
        <div className="order-sources">
          <div className="order-sources-title">订单来源</div>
          <div className="order-sources-echarts">
            <ReactEcharts
              option={getOption4()}
              className="order-footer-center-echarts"
            />
          </div>
        </div>
        {/* 出租率 */}
        <div className="letting-rate">
          <div className="letting-rate-title">出租率</div>
          <div className="letting-rate-content">
            <p>
              <span>本周</span>
              <span>
                <ArrowUpOutlined style={{ color: "green" }} />
                14.9230%
              </span>
            </p>
            <p>
              <span>本月</span>
              <span>
                <ArrowDownOutlined style={{ color: "red" }} />
                14.9230%
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}
